<script setup>

import { reactive, toRefs, onMounted, ref } from 'vue'
import api from '@/api'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
import { createRequest } from '@/util/createRequest'

const user = useUserStore()
user.loadList()
    
const tableData = ref([])
const originData = ref([])

const data = reactive({
    drawer: false,
    formSearch: {
        pym: '',
        nName: '',
        mName: '',
    },
    formData: {
        id: '',
        name: '',
        nName: '',
        mName: '',
    }
})

const onSubmit = () => {
    if(tableRef.value) {
        data.formData.id = ''
        tableRef.value.setCurrentRow()
    }

    return new Promise((resolve, reject) => {
        api.post('api/comp/supplierList', {
            pym: data.formSearch.pym
        }).then(res => {
            originData.value = []
            let task1 = []
            console.log(res.d)
            for(let d of res.d) {
                task1.push(api.post('api/comp/supplierModelList', {'sId': d.id}))
            }

            createRequest(task1).then(res => {
                let task2 = [],
                    idx = 0
                for(let i of res) {
                    for(let d of i.d) {
                        let curIdx = idx
                        originData.value.push(d)
                        task2.push(api.post('api/comp/modelDetail', {'id': d.mId})
                        .then(res => {
                            originData.value[curIdx].nId = res.d.nId
                            originData.value[curIdx].nName = res.d.nName
                        }))
                        idx ++
                    }
                }
                createRequest(task2).then(() => {
                    originData.value = originData.value.filter(d => {
                   
                        return (
                            d.nName.match(new RegExp(data.formSearch.nName, 'gi')) !== null &&
                            d.mName.match(new RegExp(data.formSearch.mName, 'gi')) !== null
                        )
                    })
                    fillTable(page.value)
                    resolve()
                })
            })
            
        })
    })
        
}

const numberPerPage = 10

const disabledPre = computed(() => (page.value === 1))
const disabledNext = computed(() => (page.value * numberPerPage >= originData.value.length))

const
    page = ref(1)

const nextPage = () => {
    page.value ++

    fillTable(page.value)
}

const prePage = () => {
    page.value --

    fillTable(page.value)
}

// 这里要用深拷贝 否则 data和tableData 会同时改变
const fillTable = num => {
    tableData.value = JSON.parse(JSON.stringify([].slice.call(originData.value, (num - 1) * numberPerPage, num * numberPerPage)))
    // for(let d of tableData.value) {
    //     if(d.code.length > 7) {
    //         d.code = d.code.slice(0, 7) + '...'
    //     }
    //     if(d.supplier.length > 7) {
    //         d.supplier = d.supplier.slice(0, 7) + '...'
    //     }
    // }
}

const tableRef = ref()

const handleCurrentChange = (currentRow, oldCurrentRow) => {
    if(currentRow) {
        data.formData.name = currentRow.sName
        data.formData.mName = currentRow.mName
        data.formData.nName = currentRow.nName
        data.formData.id = currentRow.sId
        tableRef.value.setCurrentRow(currentRow)
    } else {
        data.formData = {
            id: '',
            name: '',
            nName: '',
            mName: '',
        }
    }
}


const submit = state => {
        
    switch (Number.parseInt(state)) {
        case 0:
            api.post('api/comp/supplierEdit', {
                name: data.formData.name
            })
                .then(res => {
                    if (res.c === 0) {
                        ElMessage({
                            message: '添加成功',
                            type: ''
                        })
                    } else {
                        ElMessage({
                            message: res.m,
                            type: 'error'
                        })
                    }
                })
            break 
        case 1:
            api.post('api/comp/supplierEdit', {
                id: data.formData.id,
                name: data.formData.name
            })
                .then(res => {
                    if (res.c === 0) {
                        ElMessage({
                            message: '修改成功',
                            type: ''
                        })
                    } else {
                        ElMessage({
                            message: res.m,
                            type: 'error'
                        })
                    }
                })
            break
        case 2:
            api.post('api/comp/supplierDel', {
                id: data.formData.id
            })
                .then(res => {
                    if (res.c === 0) {
                        ElMessage({
                            message: '删除成功',
                            type: ''
                        })
                    } else {
                        ElMessage({
                            message: res.m,
                            type: 'error'
                        })
                    }
                })
            break
        default:
            break
    }
}

onSubmit()

const { formSearch, formData, drawer } = toRefs(data)

</script>

<template>
    <div class="content">
        <page-main>
            <div id="form">
                <div>
                    <el-form :inline="true" :model="formSearch" class="demo-form-inline" size="mini">
                        <el-form-item label="供应商">
                            <el-input  v-model="formSearch.pym" style="width: 80px" placeholder="输入供应商拼音码" />
                        </el-form-item>
                        <el-form-item label="设备名称">
                            <el-input  v-model="formSearch.nName" style="width: 80px" placeholder="输入设备名称" />
                        </el-form-item>
                        <el-form-item label="设备型号">
                            <el-input  v-model="formSearch.mName" style="width: 80px" placeholder="输入设备型号" />
                        </el-form-item>
                        
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <el-table
                    ref="tableRef"
                    :data="tableData" :cell-style="rowClass"
                    style="width: 730px;height:350px;font-size: 10px;"
                    highlight-current-row
                    @current-change="handleCurrentChange"
                >
                    <el-table-column
                        fixed
                        prop="sName"
                        label="供应商名称"
                        width="240px"
                    />
                    <el-table-column
                        fixed
                        prop="nName"
                        label="设备名称"
                        width="240px"
                    />
                    <el-table-column
                        fixed
                        prop="mName"
                        label="设备型号名称"
                        width="240px"
                    />
                </el-table>

                <div :style="{height: '100px', width: '100%', position: 'relative'}">
                    <div style="height: 30px;
                    width: 240px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
            
                    font-size: 8px;">
                        <span>第&nbsp;{{page}}&nbsp;页</span>
                        <span>共&nbsp;{{ Math.ceil(originData.length / numberPerPage) }}&nbsp;页   </span>
                        
                        
                        <el-button-group>
                            <el-button type="primary" @click="prePage" :disabled="disabledPre">上页</el-button>
                            <el-button type="primary" @click="nextPage" :disabled="disabledNext">下页</el-button>
                        </el-button-group>  
                    </div>
                </div>

                <!-- <el-button type="primary" style="margin-top: 20px;" @click="drawer = true">供应商操作</el-button> -->

                <!-- <el-drawer
                    v-model="drawer"   
                    title="操作"			
                    direction="rtl"
                    custom-class="demo-drawer"
                    size="30%"
                > -->
                <el-card style="margin-top: 40px;">
                    <el-form>
                        
                            <el-form-item label="设备名称" >
                                <el-input  v-model="formData.nName" disabled/>
                            </el-form-item>
                            <el-form-item label="设备型号" >
                                <el-input  v-model="formData.mName" disabled/>
                            </el-form-item>
                            <el-form-item label="供应商">
                                <el-input  v-model="formData.name" />
                            </el-form-item>

            

                        <el-form-item>
                            <el-button type="primary" :loading="loading" @click="submit(0)" :disabled="(formData.id !== '')" >添&nbsp;&nbsp;&nbsp;&nbsp;加</el-button>
                            <el-button type="primary" :loading="loading" @click="submit(1)" :disabled="(formData.id === '')">修&nbsp;&nbsp;&nbsp;&nbsp;改</el-button>
                            <el-button type="primary" :loading="loading" @click="submit(2)" :disabled="(formData.id === '')">删&nbsp;&nbsp;&nbsp;&nbsp;除</el-button>
                        </el-form-item>
                    </el-form>
                <!-- </el-drawer> -->
                </el-card>
            </div>
        </page-main>
    </div>
</template>

<style>
   
</style>